<script setup lang="ts">
import { nextTick, ref, toRefs, watch } from 'vue'
import { inspectionMap } from '@/api/inspection/resource-manage'
import { ElMessage, ElMessageBox } from 'element-plus'
import { robotAlignPosition } from '@/api/inspection/robot-list'
import useKonva from '@/composables/useKonva'
import robotIcon from '@/assets/images/common/robot_icon.png'

interface MapItem {
  id: number
  name: string
  url: string
}

interface FormData {
  code: string
  mapId: number | null
  x: number | null
  y: number | null
  theta: number
}

interface Props {
  visible: boolean
  code: string
}

// konva容器
const container = ref<HTMLDivElement>()
const { layer, pointData, drawPoint, handlePointData, initStage, initImage } = useKonva()

const mapList = ref<MapItem[]>([])
async function getMapList(): Promise<void> {
  const { data } = await inspectionMap.read()
  mapList.value = data.list
}
getMapList()

const props = defineProps<Props>()
const { visible, code } = toRefs(props)
const emit = defineEmits<{
  (e: 'update:visible', value: boolean): void
}>()

const formData = ref<FormData>({
  code: code.value,
  mapId: null,
  x: null,
  y: null,
  theta: 0
})

function onCloseDialog(): void {
  emit('update:visible', false)
  formData.value.mapId = null
}

async function onSubmit(): Promise<void> {
  await ElMessageBox.confirm('确认继续操作吗', '警告')
  const { x, y, theta } = handlePointData()
  const { message } = await robotAlignPosition({
    code: code.value,
    mapId: formData.value.mapId as number,
    x,
    y,
    theta,
    type: 'inspection'
  })
  ElMessage({ type: 'success', message })
  onCloseDialog()
}

function selectMap(val: number): void {
  if (!layer.value) return
  layer.value.off('click')
  mapList.value.forEach((element) => {
    if (element.id === val) {
      initImage(element.url)
      layer.value?.on('click', clickMap)
    }
  })
}

function clickMap(e: any): void {
  if (e.evt.button !== 0) return
  if (!layer.value || !pointData.value) return

  pointData.value.length = 0
  const { x, y } = layer.value.getRelativePointerPosition()
  formData.value.x = Number(x.toFixed(2))
  formData.value.y = Number(y.toFixed(2))
  pointData.value.push({ x: Number(x.toFixed(2)), y: Number(y.toFixed(2)) })
  drawPoint(robotIcon)
}

watch(visible, async (newVal) => {
  if (newVal) {
    await nextTick()
    initStage('mapDialogKonva', 500, 500)
  }
})
</script>

<template>
  <el-dialog
    :model-value="visible"
    title="位置校准"
    width="640px"
    top="5vh"
    @close="onCloseDialog()"
  >
    <el-form :model="formData" label-width="80px">
      <el-form-item label="选择地图">
        <el-select v-model="formData.mapId" @change="selectMap">
          <el-option v-for="item in mapList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item class="font-bold" label="选择坐标">
        <div
          id="mapDialogKonva"
          ref="container"
          class="overflow-auto border rounded border-solid border-[#dcdfe6]"
        ></div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit()">确定</el-button>
        <el-button @click="onCloseDialog()">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
